<template>
    <div class="icons-nav">
        <div
            class="icons-item"
            v-for="(item,index) of iconsNavList"
            :key="index"
            @click="goPage(index)"
        >
            <div class="icons-bd">
                <img
                    class="icons-img"
                    :src="item.imgUrl"
                />
                <div class="icons-name">{{item.iconsName}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'IconsNav',
    data() {
        return {
            iconsNavList: [
                {
                    imgUrl: require('@/assets/images/home/icons-nav-6-1.png'),
                    iconsName: '成为会员'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-6-2.png'),
                    iconsName: '白领爆品'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-6-3.png'),
                    iconsName: '白领彩妆'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-6-4.png'),
                    iconsName: '白领护肤'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-6-5.png'),
                    iconsName: '白领洗护'
                }
            ]
        }
    },
    methods: {
        goPage(index) {
            switch (index) {
                case 0:
                    this.$router.push('/experience')
                    break
                case 1:
                    this.$router.push('/hot')
                    break
                case 2:
                    this.$router.push('/cosmetics')
                    break
                case 3:
                    this.$router.push('/skinCare')
                    break
                case 4:
                    this.$router.push('/aromatherapy')
                    break
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.icons-nav
    display flex
    flex-wrap wrap
    background #fff
    .icons-item
        display flex
        align-items center
        justify-content center
        width 20%
        height 2.21rem
        .icons-bd
            text-align center
            .icons-img
                width 1.04rem
                height 1.01rem
            .icons-name
                margin-top 0.33rem
                font-size 0.32rem
                color #666
</style>
